<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="dropdownlist">
        <title>Overview | Kendo UI DropDownList</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to initialize the Kendo UI DropDownList widget, configure its options and customize templates.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/editors/dropdownlist/overview.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/editors/dropdownlist/overview.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="dropdownlist-overview"><a href="#dropdownlist-overview">DropDownList Overview</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/dropdownlist/index">Kendo UI DropDownList widget</a> displays a list of values and allows for a single selection from the list.</p>

<p>The user input is restricted within the predefined options. 
To apply a keyboard input, use the <a href="/controls/editors/combobox/overview">Kendo UI ComboBox</a>.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<h3 id="initialize-the-dropdownlist"><a href="#initialize-the-dropdownlist">Initialize the DropDownList</a></h3>

<p>You can initialize the Kendo UI DropDownList widget in any of the following ways:</p>

<ol>
<li>By using the <code>&lt;option&gt;</code> tag of an existing <code>&lt;select&gt;</code> element with defined data items.</li>
<li>By binding the widget to a local data array and using the <code>&lt;input&gt;</code> or the <code>&lt;select&gt;</code> element.</li>
<li>By binding the widget to a remote data service and using the <code>&lt;input&gt;</code> or the <code>&lt;select&gt;</code> element.</li>
</ol>

<p>The DropDownList looks and operates consistently regardless of the initialization type you choose to apply.</p>

<blockquote>
<p><strong>Important</strong></p>

<ul>
<li>Verify that you create the DropDownList within a <code>$(document).ready()</code> statement because the widget has to be initialized after the DOM is fully loaded.</li>
<li>The widget copies any styles and CSS classes from the <code>input</code> element to the <code>wrapper</code> element and visible input.</li>
</ul>
</blockquote>

<h4>Use option Tags of Existing select Elements</h4>

<p>The following example demonstrates how to initialize the DropDownList from an existing <code>&lt;select&gt;</code> element with defined data items.</p>

<h6>Example</h6>

<pre><code>&lt;select id="dropdownlist"&gt;
    &lt;option&gt;Item 1&lt;/option&gt;
    &lt;option&gt;Item 2&lt;/option&gt;
    &lt;option&gt;Item 3&lt;/option&gt;
&lt;/select&gt;

&lt;script&gt;
    $(document).ready(function(){
        $("#dropdownlist").kendoDropDownList();
    });
&lt;/script&gt;
</code></pre>

<h4>Bind to Local Data Arrays</h4>

<p>To initialize the DropDownList by binding the widget to a local data array and utilizing the <code>&lt;input&gt;</code> or the <code>&lt;select&gt;</code> element, use the <a href="/framework/datasource/overview">Data Source component</a>. It is an abstraction for local and remote data. Local arrays are appropriate for limited value options.</p>

<p>The following example demonstrates how to initialize the DropDownList by using this approach.</p>

<h6>Example</h6>

<pre><code>&lt;input id="dropdownlist"&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#dropdownlist").kendoDropDownList({
      dataTextField: "text",
      dataValueField: "value",
      dataSource: [
        { text: "Item1", value: "1" },
        { text: "Item2", value: "2" }
      ]
    });
  });
&lt;/script&gt;
</code></pre>

<h4>Bind to Remote Data Services</h4>

<p>To initialize the DropDownList by binding the widget to remote data arrays and utilizing the <code>&lt;input&gt;</code> or the <code>&lt;select&gt;</code> element, use the <a href="/framework/datasource/overview">Data Source component</a>. It is an abstraction for local and remote data. Remote data binding is appropriate for larger data sets, so that items are loaded on demand when displayed. You can use the DataSource for serving data from a variety of data services such as <a href="http://en.wikipedia.org/wiki/XML">XML</a>, <a href="http://en.wikipedia.org/wiki/JSON">JSON</a>, and <a href="http://en.wikipedia.org/wiki/JSONP">JSONP</a>.</p>

<p>The following example demonstrates how to initialize the DropDownList by using this approach.</p>

<h6>Example</h6>

<pre><code>&lt;input id="dropdownlist"&gt;

&lt;script&gt;
    $(document).ready(function() {
        $("#dropdownlist").kendoDropDownList({
            index: 0,
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                type: "odata", // specifies data protocol
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h2 id="templates"><a href="#templates">Templates</a></h2>

<p>The DropDownList uses <a href="/framework/templates/overview">Kendo UI templates</a> to provide full control over the way an item, a selected value, or a pop-up header is rendered.</p>

<p>For more information on the capabilities and syntax of the templates, refer to the <a href="/framework/templates/overview">documentation</a>.</p>

<h3 id="item-templates"><a href="#item-templates">Item Templates</a></h3>

<p>The item template manages the way the list items of a DropDownList are rendered.  </p>

<p>The following example demonstrates how to define an item template.</p>

<h6>Example</h6>

<pre><code>&lt;input id="dropdownlist" /&gt;
&lt;!-- Template --&gt;
&lt;script id="scriptTemplate" type="text/x-kendo-template"&gt;
    ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
&lt;/script&gt;

&lt;!-- DropDownList initialization --&gt;
&lt;script&gt;
    $(document).ready(function() {
        $("#dropdownlist").kendoDropDownList({
            template: $("#scriptTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="value-templates"><a href="#value-templates">Value Templates</a></h3>

<p>The value template manages the way the selected value of a DropDownList is rendered.  </p>

<p>The following example demonstrates how to define a value template.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>Value templates must consist of inline HTML elements only.</p>
</blockquote>

<h6>Example</h6>

<pre><code>&lt;input id="dropdownlist" /&gt;
&lt;!-- Template --&gt;
&lt;script id="valueTemplate" type="text/x-kendo-template"&gt;
    ContactName: #:data.ContactName#
&lt;/script&gt;

&lt;!-- DropDownList initialization --&gt;
&lt;script&gt;
    $(document).ready(function() {
        $("#dropdownlist").kendoDropDownList({
            valueTemplate: $("#valueTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="header-templates"><a href="#header-templates">Header Templates</a></h3>

<p>The header template manages the way the pop-up header of a DropDownList is rendered.</p>

<p>The following example demonstrates how to define a header template.</p>

<h6>Example</h6>

<pre><code>&lt;input id="dropdownlist" /&gt;
&lt;!-- Template --&gt;
&lt;script id="headerTemplate" type="text/x-kendo-template"&gt;
    &lt;strong&gt;Header&lt;/strong&gt;
&lt;/script&gt;

&lt;!-- DropDownList initialization --&gt;
&lt;script&gt;
    $(document).ready(function() {
        $("#dropdownlist").kendoDropDownList({
            headerTemplate: $("#headerTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="footer-templates"><a href="#footer-templates">Footer Templates</a></h3>

<p>The footer template manages the way the pop-up footer of a DropDownList is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the widget itself.</p>

<p>The following example demonstrates how to define a footer template.</p>

<h6>Example</h6>

<pre><code>&lt;input id="dropdownlist" /&gt;
&lt;!-- Template --&gt;
&lt;script id="footerTemplate" type="text/x-kendo-template"&gt;
    Total &lt;strong&gt;#: instance.dataSource.total() #&lt;/strong&gt; items found
&lt;/script&gt;

&lt;!-- DropDownList initialization --&gt;
&lt;script&gt;
    $(document).ready(function() {
        $("#dropdownlist").kendoDropDownList({
            footerTemplate: $("#footerTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="no-data-templates"><a href="#no-data-templates">No-Data Templates</a></h3>

<p>The DropDownList widget displays <code>noDataTemplate</code> in the popup when the data source is empty.</p>

<p>The following example demonstrates how to define a <code>noDataTemplate</code> template.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>When the <code>noDataTemplate</code> option is defined, the widget always opens the popup element.</p>
</blockquote>

<h6>Example</h6>

<pre><code>&lt;input id="dropDownList" /&gt;
&lt;!-- Template --&gt;
&lt;script id="noDataTemplate" type="text/x-kendo-template"&gt;
    &lt;strong&gt;No Data!&lt;/strong&gt;
&lt;/script&gt;

&lt;!-- DropDownList initialization --&gt;
&lt;script&gt;
    $(document).ready(function() {
        $("#dropDownList").kendoDropDownList({
            noDataTemplate: $("#noDataTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
&lt;/script&gt;
</code></pre>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-Change"><a href="#configuration-Change">Change the List Width</a></h3>

<p>To customize the width of a drop-down list and change its dimensions, use the jQuery <code>width()</code> method.</p>

<h6>Example</h6>

<pre><code>&lt;input id="dropDownList"&gt;
&lt;script&gt;
  $(document).ready(function() {
    $("#dropDownList").kendoDropDownList();
    var dropdownlist = $("#dropDownList").data("kendoDropDownList");
    dropdownlist.list.width(400);
  });
&lt;/script&gt;
</code></pre>

<p>The following example demonstrates how to set the list dimensions through an MVVM binding.</p>

<h6>Example</h6>

<pre data-lang="html"><code>  &lt;input id="ddl" data-role="dropdownlist" data-bind="source: foo" /&gt;

  &lt;script&gt;
    var vm = {
      foo: [ "one", "two" ]
    }

    kendo.bind(document.body, vm);
    $("#ddl").data("kendoDropDownList").list.width(400);
  &lt;/script&gt;
</code></pre>

<h3 id="configuration-Adjust"><a href="#configuration-Adjust">Adjust the Popup Width</a></h3>

<p>You can let the popup element automatically adjust its width according to the length of the item label it displays. When the <code>autoWidth</code> option is set to <code>true</code>, the popup shows the content on one line and does not wrap it up.</p>

<h6>Example</h6>

<pre><code>&lt;input id="dropdownlist" style="width: 100px;" /&gt;
&lt;script&gt;
$("#dropdownlist").kendoDropDownList({
  autoWidth: true,
  dataSource: {
    data: ["Short item", "An item with really, really long text"]
  }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-Access"><a href="#configuration-Access">Access *-list Elements</a></h3>

<p>The drop-down list renders an ID attribute, generated from the ID of the widget and the <code>-list</code> suffix.</p>

<p>The ID can be used to style the element or to access a specific element inside the popup element.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>If the widget has no ID, the drop-down element will have no ID either.</p>
</blockquote>

<h6>Example</h6>

<pre><code>&lt;input id="ddl"&gt;
&lt;script&gt;
  $(document).ready(function() {
    $("#ddl").kendoDropDownList({
        dataSource: ["Item1", "Item2"]
    });

    //the DIV popup element that holds header, footer templates and the suggestion options.
    var popupElement = $("#ddl-list");

    console.log(popupElement);
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-Support"><a href="#configuration-Support">Support label Elements</a></h3>

<p>Because of its complex rendering, focusing the widget by using a <code>label</code> element requires additional implementation. For more information about how to do it, check <a href="http://dojo.telerik.com/uSeho">this Kendo UI Dojo snippet</a>.</p>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on the Kendo UI DropDownList:</p>

<ul>
<li><a href="/api/javascript/ui/dropdownlist">DropDownList JavaScript API Reference</a></li>
<li><a href="/controls/editors/combobox/grouping">Grouping Functionality</a></li>
<li><a href="/controls/editors/combobox/virtualization">Virtualization</a></li>
<li><a href="/controls/editors/dropdownlist/cascading">Cascading DropDownLists</a></li>
<li><a href="/controls/editors/dropdownlist/troubleshoot/troubleshooting">Troubleshooting</a></li>
<li><a href="/controls/editors/dropdownlist/how-to/AngularJS/distinct-dropdownlist-ng-repeat">How to Cascade DropDownLists Using <code>ng-repeat</code></a></li>
<li><a href="/controls/editors/dropdownlist/how-to/event-handling/detect-wrapper-focus-event">How to Detect Wrapper Focus Events</a></li>
<li><a href="/controls/editors/dropdownlist/how-to/appearance/group-label-on-top-of-the-items">How to Move the Group Label on Top of Items</a></li>
<li><a href="/controls/editors/dropdownlist/how-to/editing/remove-items">How to Remove Items</a></li>
<li><a href="/controls/editors/dropdownlist/how-to/binding/set-datasource-dynamically">How to Set DataSource Dynamically</a></li>
<li><a href="/aspnet-mvc/helpers/dropdownlist/overview">Overview of the ASP.NET MVC HtmlHelper Extension fro the DropDownList Widget</a></li>
<li><a href="/jsp/tags/dropdownlist/overview">Overview of the DropDownList JSP Tag</a></li>
<li><a href="/php/widgets/dropdownlist/overview">Overview of the DropDownList PHP Class</a></li>
</ul>

<p>Articles on the Kendo UI ComboBox:</p>

<ul>
<li><a href="/controls/editors/combobox/overview">Overview of the ComboBox Widget</a></li>
<li><a href="/controls/editors/combobox/grouping">Grouping Functionality</a></li>
<li><a href="/controls/editors/combobox/virtualization">Virtualization</a></li>
<li><a href="/controls/editors/combobox/cascading">Cascading ComboBoxes</a></li>
<li><a href="/controls/editors/combobox/serverfiltering">Server Filtering</a></li>
<li><a href="/api/javascript/ui/combobox">ComboBox JavaScript API Reference</a></li>
</ul>

<p>Articles on the Kendo UI MultiSelect:</p>

<ul>
<li><a href="/controls/editors/multiselect/overview">Overview of the MultiSelect Widget</a></li>
<li><a href="/api/javascript/ui/multiselect">MultiSelect JavaScript API Reference</a></li>
</ul>

<p>Articles on the Kendo UI AutoComplete:</p>

<ul>
<li><a href="/controls/editors/autocomplete/overview">Overview of the AutoComplete Widget</a></li>
<li><a href="/api/javascript/ui/autocomplete">AutoComplete JavaScript API Reference</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

